<template>
  <div class="content">
    <dc-header @submit='seveInfo' :title="'目标管理'" actionTitle="保 存" :icon="'icon-header-back'">
      <mt-button icon="more" slot="right"></mt-button>
    </dc-header>
    <div class="content-body">
    <div class="body-box">
      <mt-cell title="标题文字" class="tooltip-cell-special">
        <div style="padding-top: 6px" slot="title">
          <i style="color: #33c584;" class="iconfont icon-ic__mubiaoguanli_yingyeemubiao leftIcon"></i>
          <span class="fontSize34">营业额目标</span>
          <!--<i class="iconfont icon-ic_yiwen rightIcon"></i>-->
          <tooltip :place="'bottom-left'" :msg="'营业目标需根据门店的情况进行手动设定,设定后指标会呈现在营业报表中'"></tooltip>
        </div>
        <mt-switch v-model="targetValue"></mt-switch>
      </mt-cell>
      <mt-cell v-if="targetValue" style="background: #FAFAFA;color: #999;" title="标题文字">
        <div class="checkBox" slot="title">
          <!--<span class="leftSpan" @click="dateType = 1" v-bind:class = "{active: dateType == 1}">日</span>-->
          <!--<span  @click = "dateType = 2" v-bind:class = "{active: dateType == 2}" class="rightSpan">月</span>-->
          本月目标
        </div>
        <div class="input-box"><input v-model="turnover" placeholder="请输入金额" type="tel">元</div>
      </mt-cell>
      <div></div>
    </div>
    <div style="margin-top: 20px"></div>
    <mt-cell class="tooltip-cell-special" title="标题文字">
      <div style="padding-top: 6px" slot="title">
        <i style="color: #f93b6c" class="iconfont icon-ic__mubiaoguanli_baobenxian leftIcon"></i>
        <span class="fontSize34">保本线</span>
        <tooltip :place="'bottom-left'" :msg="'保本线需根据门店的情况进行手动设定,设定后指标会呈现在营业报表中'"></tooltip>
        <!--<i class="iconfont icon-ic_yiwen rightIcon"></i>-->
      </div>
      <mt-switch v-model="baselineValue"></mt-switch>
    </mt-cell>
    <mt-cell v-if="baselineValue" style="background: #FAFAFA;color: #999;" title="标题文字">
      <span class="fontSize34" slot="title">本月保本线情况</span>
      <span class="fontSize34">{{lineNum}}元</span>
    </mt-cell>
    <div v-if="baselineValue">
      <dc-row class="item prompt-box" type="flex" justify="end">
        <dc-col span="18">
          <p>保本线为空？</p>
          <p>请及时在记账工具维护成本费用数据</p>
        </dc-col>
        <dc-col span="6" style="padding: 5px 0">
          <mt-button type="danger" style="background: #7b78f2" @click="gokeep">记一笔</mt-button>
        </dc-col>
      </dc-row>
    </div>
  </div>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex';
  import {col, row} from '@/common/Flex';
  import header from '@/common/plugins/header';
  import mintUi from '@/common/mintUi';
  import api from '../../common/api/objective';
  import tooltip from '@/common/plugins/tooltip';
  import {permissions} from '@/common/permission';

  /**
   * @namespace  components/objective/objective
   * @author zhangdongliang
   */
  export default {
    components: {
      'dc-header': header,
      'dc-col': col,
      'dc-row': row,
      'tooltip': tooltip
    },
    computed: {
      ...mapGetters(['userInfo', 'firstInfo'])
    },
    data () {
      return {
        'targetValue': true,
        'baselineValue': true,
        'dateType': 1,
        'turnover': 0,
        'lineNum': '',
        'accountType': ''
      };
    },
    methods: {
      getInfo (e) {
        api.getInfo({}).then(res => {
          this.turnover = parseFloat(res.turnover) ? parseFloat(res.turnover).toFixed(2) : '';
          this.lineNum = parseFloat(res.lineNum).toFixed(2);
          this.targetValue = !!res.turnoverStatus;
          this.baselineValue = !!res.lineStatus;
          this.dateType = +res.turnoverFlag;
          this.id = res.id;
        });
      },
      seveInfo () {
        let data = {};
        data.turnover = this.turnover;
        data.lineNum = this.lineNum;
        data.turnoverStatus = +this.targetValue;
        data.lineStatus = +this.baselineValue;
        data.turnoverFlag = this.dateType;
        data.id = this.id;
        var reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
        if (!reg.test(data.turnover) && this.targetValue) {
          mintUi.openToast('请填写数字金额');
          return;
        }
        api.seveInfo(data).then(res => {
          mintUi.openToast('修改成功');
          this.$router.push('/personal');
        });
      },
      getAccountType () {
        let that = this;
        api.getAccountType({}).then(res => {
          that.accountType = res;
        });
      },
      gokeep () {
        if (!permissions('记账')) {
          return;
        }
        if (this.accountType === 1) {
          this.$router.push('/simAccountTool');
        } else if (this.accountType === 2) {
          this.$router.push('/keepAccounts');
        }
      }
    },
    activated () {
      let id = sessionStorage.getItem('store');
      let idobj = JSON.parse(id);
      this.getInfo(idobj.storeCode);
      this.getAccountType();
    }
  };
</script>
<style lang="scss" scoped>
  @import "../../assets/css/variable";

  .fontSize34 {
    font-size: px2rem(32px);
  }

  .content {
    font-size: px2rem(34px);
    color: #333;
  }

  .leftIcon {
    margin-right: px2rem(8px);
    font-size: px2rem(48px);
    margin-top: px2rem(-3px);
    display: inline-block;
    vertical-align: middle;
  }

  .rightIcon {
    margin-left: px2rem(8px);
    font-size: px2rem(32px);
    color: #999;
    margin-bottom: px2rem(3px);
    display: inline-block;
    vertical-align: middle;
  }

  .input-box {
    color: #333333;
    font-size: px2rem(34px);
    /*vertical-align: middle;*/
    input {
      line-height: px2rem(42px);
      background: #FAFAFA;
      font-size: px2rem(32px);
      margin-right: 10px;
      text-align: right;
      border: none;
      outline: none;
    }
  }

  .prompt-box {
    background: #e7f5fe;
    margin: px2rem(20px);
    padding: px2rem(15px) px2rem(30px);
    text-align: left;
    color: #5d90c8;
    font-size: px2rem(28px);
    line-height: px2rem(40px);
    p {
      margin: 0;
    }
    button {
      margin: auto;
      height: 100%;
      font-size: px2rem(32px);
      text-align: center;
    }
  }

  .checkBox {
    span {
      font-size: px2rem(30px);
      padding: px2rem(10px) px2rem(20px);
      border: 1px solid #cbcbcb;
    }
    .leftSpan {
      border-top-left-radius: px2rem(13px);
      border-bottom-left-radius: px2rem(13px);
    }
    .rightSpan {
      border-top-right-radius: px2rem(13px);
      border-bottom-right-radius: px2rem(13px);
      /*display: inline-block;*/
      margin-left: -1px;
    }
    .active {
      border: 1px solid $theme-color;
      background: $theme-color;
      color: #fff;
    }
  }

  /*.tooltip-cell-special{*/
  .tooltip-cell-special {
    overflow: visible;
    .mint-cell-wrapper {
      overflow: visible !important;
    }
  }

  /*}*/

  .body-box {
    margin-top: px2rem(100px);
  }
</style>
